<template>
  <div class="technology">
    <div class="technologyBox" ref="pieBox">
      <PieChart :option="option" v-if="isPie"></PieChart>
    </div>
  </div>
</template>

<script setup>
import PieChart from "../components/PieChart.vue"
import {reactive, ref, onBeforeMount, onMounted} from "vue";
import {http} from "../axios/index.js";

//饼图配置
const option = reactive({
  title: {
    text: "技术栈",
    top: "0%",
    left: "5%",
    textStyle: {
      color: "#ff6ec7",
      fontFamily: "楷体"
    }
  },
  series: [
    {
      type: "pie",
      radius: "50%",
      data: []
    }
  ]
})
//获取技术栈信息
async function getTechnology(){
  const res = await http({
    url: "/get_technology"
  })
  if(res.data.code === 0){
    //冻结对象，提升性能
    Object.freeze(res.data.data.technologyList)
    option.series[0].data = res.data.data.technologyList
  }
}

//是否挂载饼图组件
let isPie = ref(false)
//饼图的容器盒子
let pieBox = ref()
//监听饼图容器是否进入可视区域
function inter(){
  const intersectionObserver = new IntersectionObserver(entries=>{
    //如果目标在可视区域外，则不做任何事
    if(entries[0].intersectionRatio <= 0) return
    //目标进入视野
    isPie.value = true
    //触发后关闭监听
    intersectionObserver.disconnect()
  })
  //监听指令所绑定的元素
  intersectionObserver.observe(pieBox.value)
}

onBeforeMount(()=>{
  getTechnology()
})

onMounted(()=>{
  inter()
})
</script>

<style scoped>
.technology{
  background: url("/assets/technology/technology_bg.jpg") bottom left;
}
.technology .technologyBox{
  width: 90vmin;
  height: 90vmin;
  backdrop-filter: blur(5px);
  box-shadow: 5px 5px 10px #444444;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>